<div fxLayoutAlign="center">

    <div class="form-container">

        <div class="heading mat-elevation-z6">
            <div>{{"DIGITAL_WALLET" | translate}}</div>
        </div>

        <mat-card class="mat-elevation-z6">

          <h2 translate>LABEL_ADD_MONEY</h2>
            <p>
                <b>
                    <span translate>LABEL_WALLET_BALANCE</span>
                    <span class="confirmation"> {{ balance }}</span>
                </b>
            </p>
            <mat-form-field appearance="outline" color="accent">
                <mat-label>{{'LABEL_AMOUNT' | translate}}</mat-label>
                <input  [formControl]="balanceControl" type="number" matInput aria-label="Enter an amount">
                <mat-error *ngIf="balanceControl.invalid && balanceControl.errors.required" translate>
                    MANDATORY_AMOUNT
                </mat-error>
                <mat-error *ngIf="balanceControl.invalid && (balanceControl.errors.min || balanceControl.errors.max)" translate>
                    AMOUNT_LIMIT
                </mat-error>
            </mat-form-field>

          <button type="submit" id="submitButton" (click)="continue()" [disabled]="balanceControl.invalid"
                  mat-raised-button color="primary" aria-label="Button to send the complaint">
            <i class="material-icons">
              send
            </i>
            {{'LABEL_CONTINUE' | translate}}
          </button>
        </mat-card>

    </div>
</div>
